<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-05-06 11:23:18
 * @LastEditors: icymoon911 icymoon911@163.com
 * @LastEditTime: 2024-07-22 19:18:47
 * @FilePath: \ken147258.topayClient\src\views\other\system\basic-setting.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <el-card>
      <FormList
        v-model:formRef="formDialogId"
        v-model:formModel="formDialogModel"
        :initForm="initForm"
      ></FormList>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { FormInstance } from "element-plus";
import FormList from "@/components/FormList/index.vue";
import { passmodify } from "@/api/other/behavior";
import { useUserStore } from "@/store";

let formDialogId = ref<FormInstance>();
let formDialogModel = ref({});

const initForm = ref({
  // 表单标签位置
  // labelPosition: "right",
  formAttrs: {
    // 是否内联
    // inline: true,
    labelPosition: "top",
  },
  rowAttrs: {
    // 行内表单数量
    columnsNum: 1,
  },
  // 初始化表单字段
  initKeys: [
    // {
    //   // 类型
    //   type: "input",
    //   // 唯一标识
    //   key: "tg",
    //   // 表单属性
    //   formAttrs: {
    //     label: "tg",
    //   },
    //   // 控制属性
    //   controlAttrs: {
    //     // 提示文本
    //     placeholder: "请输入操作者ID",
    //     // 是否可清空
    //     clearable: true,
    //   },
    //   // 控制事件
    //   controlOn: {},
    // },
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "old_pass",
      // 表单属性
      formAttrs: {
        label: "当前密码",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入当前密码",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "new_pass",
      // 表单属性
      formAttrs: {
        label: "新密码",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入新密码",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "confirm_pass",
      // 表单属性
      formAttrs: {
        label: "确认新密码",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请确认新密码",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "buttons",
      // 按钮
      btns: [
        {
          // 文本
          text: "确认修改",
          // 控制属性
          controlAttrs: {
            // 类型
            type: "primary",
            icon: "check",
          },
          // 控制事件
          controlOn: {
            // 点击
            click: (e: Event, formRef: FormInstance, data: Array<object>) => {
              formRef.validate((valid) => {
                if (valid) {
                  console.log("fields", data);
                  passmodify({ ...data, id: useUserStore().user.info.id }).then(() => {
                    ElMessage.success("修改成功");
                  });
                }
              });
            },
          },
        },
      ],
    },
  ],
});
</script>

<style scoped></style>
